<template>
<div class="page-wrapper">
  <!-- ============================================================== -->
  <!-- Bread crumb and right sidebar toggle -->
  <!-- ============================================================== -->
  <div class="page-breadcrumb">
    <div class="row">
      <div class="col-12 d-flex no-block align-items-center">
        <h4 class="page-title">Form Basic</h4>
        <div class="ml-auto text-right">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="#">Home</a>
              </li>
              <li class="breadcrumb-item active" aria-current="page">Library</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <!-- ============================================================== -->
  <!-- End Bread crumb and right sidebar toggle -->
  <!-- ============================================================== -->
  <!-- ============================================================== -->
  <!-- Container fluid  -->
  <!-- ============================================================== -->
  <div class="container-fluid">
    <!-- ============================================================== -->
    <!-- Start Page Content -->
    <!-- ============================================================== -->
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <form class="form-horizontal">
            <div class="card-body">
              <h4 class="card-title">Personal Info</h4>
              <div class="form-group row">
                <label
                  for="fname"
                  class="col-sm-3 text-right control-label col-form-label"
                >First Name</label>
                <div class="col-sm-9">
                  <input
                    type="text"
                    class="form-control"
                    id="fname"
                    placeholder="First Name Here"
                  >
                </div>
              </div>
              <div class="form-group row">
                <label
                  for="lname"
                  class="col-sm-3 text-right control-label col-form-label"
                >Last Name</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="lname" placeholder="Last Name Here">
                </div>
              </div>
              <div class="form-group row">
                <label
                  for="lname"
                  class="col-sm-3 text-right control-label col-form-label"
                >Password</label>
                <div class="col-sm-9">
                  <input
                    type="password"
                    class="form-control"
                    id="lname"
                    placeholder="Password Here"
                  >
                </div>
              </div>
              <div class="form-group row">
                <label
                  for="email1"
                  class="col-sm-3 text-right control-label col-form-label"
                >Company</label>
                <div class="col-sm-9">
                  <input
                    type="text"
                    class="form-control"
                    id="email1"
                    placeholder="Company Name Here"
                  >
                </div>
              </div>
              <div class="form-group row">
                <label
                  for="cono1"
                  class="col-sm-3 text-right control-label col-form-label"
                >Contact No</label>
                <div class="col-sm-9">
                  <input
                    type="text"
                    class="form-control"
                    id="cono1"
                    placeholder="Contact No Here"
                  >
                </div>
              </div>
              <div class="form-group row">
                <label
                  for="cono1"
                  class="col-sm-3 text-right control-label col-form-label"
                >Message</label>
                <div class="col-sm-9">
                  <textarea class="form-control"></textarea>
                </div>
              </div>
            </div>
            <div class="border-top">
              <div class="card-body">
                <button type="button" class="btn btn-primary">Submit</button>
              </div>
            </div>
          </form>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Form Elements</h5>
            <div class="form-group row">
              <label class="col-md-3 m-t-15">Single Select</label>
              <div class="col-md-9">
                <select
                  class="select2 form-control custom-select"
                  style="width: 100%; height:36px;"
                >
                  <option>Select</option>
                  <optgroup label="Alaskan/Hawaiian Time Zone">
                    <option value="AK">Alaska</option>
                    <option value="HI">Hawaii</option>
                  </optgroup>
                  <optgroup label="Pacific Time Zone">
                    <option value="CA">California</option>
                    <option value="NV">Nevada</option>
                    <option value="OR">Oregon</option>
                    <option value="WA">Washington</option>
                  </optgroup>
                  <optgroup label="Mountain Time Zone">
                    <option value="AZ">Arizona</option>
                    <option value="CO">Colorado</option>
                    <option value="ID">Idaho</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NM">New Mexico</option>
                    <option value="ND">North Dakota</option>
                    <option value="UT">Utah</option>
                    <option value="WY">Wyoming</option>
                  </optgroup>
                  <optgroup label="Central Time Zone">
                    <option value="AL">Alabama</option>
                    <option value="AR">Arkansas</option>
                    <option value="IL">Illinois</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="OK">Oklahoma</option>
                    <option value="SD">South Dakota</option>
                    <option value="TX">Texas</option>
                    <option value="TN">Tennessee</option>
                    <option value="WI">Wisconsin</option>
                  </optgroup>
                  <optgroup label="Eastern Time Zone">
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="IN">Indiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="OH">Ohio</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WV">West Virginia</option>
                  </optgroup>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 m-t-15">Multiple Select</label>
              <div class="col-md-9">
                <select
                  class="select2 form-control m-t-15"
                  multiple="multiple"
                  style="height: 36px;width: 100%;"
                >
                  <optgroup label="Alaskan/Hawaiian Time Zone">
                    <option value="AK">Alaska</option>
                    <option value="HI">Hawaii</option>
                  </optgroup>
                  <optgroup label="Pacific Time Zone">
                    <option value="CA">California</option>
                    <option value="NV">Nevada</option>
                    <option value="OR">Oregon</option>
                    <option value="WA">Washington</option>
                  </optgroup>
                  <optgroup label="Mountain Time Zone">
                    <option value="AZ">Arizona</option>
                    <option value="CO">Colorado</option>
                    <option value="ID">Idaho</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NM" selected>New Mexico</option>
                    <option value="ND">North Dakota</option>
                    <option value="UT">Utah</option>
                    <option value="WY">Wyoming</option>
                  </optgroup>
                  <optgroup label="Central Time Zone">
                    <option value="AL">Alabama</option>
                    <option value="AR">Arkansas</option>
                    <option value="IL">Illinois</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="OK">Oklahoma</option>
                    <option value="SD" selected>South Dakota</option>
                    <option value="TX">Texas</option>
                    <option value="TN">Tennessee</option>
                    <option value="WI">Wisconsin</option>
                  </optgroup>
                  <optgroup label="Eastern Time Zone">
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="IN">Indiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="OH">Ohio</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WV">West Virginia</option>
                  </optgroup>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3">Radio Buttons</label>
              <div class="col-md-9">
                <div class="custom-control custom-radio">
                  <input
                    type="radio"
                    class="custom-control-input"
                    id="customControlValidation1"
                    name="radio-stacked"
                    required
                  >
                  <label class="custom-control-label" for="customControlValidation1">First One</label>
                </div>
                <div class="custom-control custom-radio">
                  <input
                    type="radio"
                    class="custom-control-input"
                    id="customControlValidation2"
                    name="radio-stacked"
                    required
                  >
                  <label class="custom-control-label" for="customControlValidation2">Second One</label>
                </div>
                <div class="custom-control custom-radio">
                  <input
                    type="radio"
                    class="custom-control-input"
                    id="customControlValidation3"
                    name="radio-stacked"
                    required
                  >
                  <label class="custom-control-label" for="customControlValidation3">Third One</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3">Checkboxes</label>
              <div class="col-md-9">
                <div class="custom-control custom-checkbox mr-sm-2">
                  <input
                    type="checkbox"
                    class="custom-control-input"
                    id="customControlAutosizing1"
                  >
                  <label class="custom-control-label" for="customControlAutosizing1">First One</label>
                </div>
                <div class="custom-control custom-checkbox mr-sm-2">
                  <input
                    type="checkbox"
                    class="custom-control-input"
                    id="customControlAutosizing2"
                  >
                  <label class="custom-control-label" for="customControlAutosizing2">Second One</label>
                </div>
                <div class="custom-control custom-checkbox mr-sm-2">
                  <input
                    type="checkbox"
                    class="custom-control-input"
                    id="customControlAutosizing3"
                  >
                  <label class="custom-control-label" for="customControlAutosizing3">Third One</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3">File Upload</label>
              <div class="col-md-9">
                <div class="custom-file">
                  <input type="file" class="custom-file-input" id="validatedCustomFile" required>
                  <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
                  <div class="invalid-feedback">Example invalid custom file feedback</div>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3" for="disabledTextInput">Disabled input</label>
              <div class="col-md-9">
                <input
                  type="text"
                  id="disabledTextInput"
                  class="form-control"
                  placeholder="Disabled input"
                  disabled
                >
              </div>
            </div>
          </div>
          <div class="border-top">
            <div class="card-body">
              <button type="button" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Forms Control</h4>
            <div class="form-group">
              <label for="hue-demo">Hue</label>
              <input
                type="text"
                id="hue-demo"
                class="form-control demo"
                data-control="hue"
                value="#ff6161"
              >
            </div>
            <div class="form-group">
              <label for="position-bottom-left">Bottom left (default)</label>
              <input
                type="text"
                id="position-bottom-left"
                class="form-control demo"
                data-position="bottom left"
                value="#0088cc"
              >
            </div>
            <div class="form-group">
              <label for="position-top-right">Top right</label>
              <input
                type="text"
                id="position-top-right"
                class="form-control demo"
                data-position="top right"
                value="#0088cc"
              >
            </div>
            <label>Datepicker</label>
            <div class="input-group">
              <input type="text" class="form-control mydatepicker" placeholder="mm/dd/yyyy">
              <div class="input-group-append">
                <span class="input-group-text">
                  <i class="fa fa-calendar"></i>
                </span>
              </div>
            </div>
            <label class="m-t-15">Autoclose Datepicker</label>
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                id="datepicker-autoclose"
                placeholder="mm/dd/yyyy"
              >
              <div class="input-group-append">
                <span class="input-group-text">
                  <i class="fa fa-calendar"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="border-top">
            <div class="card-body">
              <button type="submit" class="btn btn-success">Save</button>
              <button type="submit" class="btn btn-primary">Reset</button>
              <button type="submit" class="btn btn-info">Edit</button>
              <button type="submit" class="btn btn-danger">Cancel</button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title m-b-0">Form Elements</h5>
            <div class="form-group m-t-20">
              <label>
                Date Mask
                <small class="text-muted">dd/mm/yyyy</small>
              </label>
              <input
                type="text"
                class="form-control date-inputmask"
                id="date-mask"
                placeholder="Enter Date"
              >
            </div>
            <div class="form-group">
              <label>
                Phone
                <small class="text-muted">(999) 999-9999</small>
              </label>
              <input
                type="text"
                class="form-control phone-inputmask"
                id="phone-mask"
                placeholder="Enter Phone Number"
              >
            </div>
            <div class="form-group">
              <label>
                International Number
                <small class="text-muted">+19 999 999 999</small>
              </label>
              <input
                type="text"
                class="form-control international-inputmask"
                id="international-mask"
                placeholder="International Phone Number"
              >
            </div>
            <div class="form-group">
              <label>
                Phone / xEx
                <small class="text-muted">(999) 999-9999 / x999999</small>
              </label>
              <input
                type="text"
                class="form-control xphone-inputmask"
                id="xphone-mask"
                placeholder="Enter Phone Number"
              >
            </div>
            <div class="form-group">
              <label>
                Purchase Order
                <small class="text-muted">aaaa 9999-****</small>
              </label>
              <input
                type="text"
                class="form-control purchase-inputmask"
                id="purchase-mask"
                placeholder="Enter Purchase Order"
              >
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Form Elements</h5>
            <div class="row mb-3 align-items-center">
              <div class="col-lg-4 col-md-12 text-right">
                <span>Tooltip Input</span>
              </div>
              <div class="col-lg-8 col-md-12">
                <input
                  type="text"
                  data-toggle="tooltip"
                  title="A Tooltip for the input !"
                  class="form-control"
                  id="validationDefault05"
                  placeholder="Hover For tooltip"
                  required
                >
              </div>
            </div>
            <div class="row mb-3 align-items-center">
              <div class="col-lg-4 col-md-12 text-right">
                <span>Type Ahead Input</span>
              </div>
              <div class="col-lg-8 col-md-12">
                <input
                  type="text"
                  class="form-control"
                  placeholder="Type here for auto complete.."
                  required
                >
              </div>
            </div>
            <div class="row mb-3 align-items-center">
              <div class="col-lg-4 col-md-12 text-right">
                <span>Prepended Input</span>
              </div>
              <div class="col-lg-8 col-md-12">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">#</span>
                  </div>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="Prepend"
                    aria-label="Username"
                    aria-describedby="basic-addon1"
                  >
                </div>
              </div>
            </div>
            <div class="row mb-3 align-items-center">
              <div class="col-lg-4 col-md-12 text-right">
                <span>Appended Input</span>
              </div>
              <div class="col-lg-8 col-md-12">
                <div class="input-group">
                  <input
                    type="text"
                    class="form-control"
                    placeholder="5.000"
                    aria-label="Recipient 's username"
                    aria-describedby="basic-addon2"
                  >
                  <div class="input-group-append">
                    <span class="input-group-text" id="basic-addon2">$</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mb-3 align-items-center">
              <div class="col-lg-4 col-md-12 text-right">
                <span class="text-success">Input with Sccess</span>
              </div>
              <div class="col-lg-8 col-md-12">
                <input type="text" class="form-control is-valid" id="validationServer01">
                <div class="valid-feedback">Woohoo!</div>
              </div>
            </div>
            <div class="row mb-3 align-items-center">
              <div class="col-lg-4 col-md-12 text-right">
                <span class="text-danger">Input with Error</span>
              </div>
              <div class="col-lg-8 col-md-12">
                <input type="text" class="form-control is-invalid" id="validationServer01">
                <div class="invalid-feedback">Please correct the error</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <div class="row mb-3">
              <div class="col-lg-12">
                <input type="text" class="form-control" placeholder="col-md-12">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-11">
                <input type="text" class="form-control" placeholder="col-md-11">
              </div>
              <div class="col-lg-1 p-l-0">
                <input type="text" class="form-control" placeholder="col-md-1">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-10">
                <input type="text" class="form-control" placeholder="col-md-10">
              </div>
              <div class="col-lg-2">
                <input type="text" class="form-control" placeholder="col-md-2">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-9">
                <input type="text" class="form-control" placeholder="col-md-9">
              </div>
              <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="col-md-3">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-8">
                <input type="text" class="form-control" placeholder="col-md-8">
              </div>
              <div class="col-lg-4">
                <input type="text" class="form-control" placeholder="col-md-4">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-7">
                <input type="text" class="form-control" placeholder="col-md-7">
              </div>
              <div class="col-lg-5">
                <input type="text" class="form-control" placeholder="col-md-5">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-6">
                <input type="text" class="form-control" placeholder="col-md-6">
              </div>
              <div class="col-lg-6">
                <input type="text" class="form-control" placeholder="col-md-6">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-5">
                <input type="text" class="form-control" placeholder="col-md-5">
              </div>
              <div class="col-lg-7">
                <input type="text" class="form-control" placeholder="col-md-7">
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-lg-2">
                <input type="text" class="form-control" placeholder="col-md-2">
              </div>
              <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="col-md-3">
              </div>
              <div class="col-lg-4">
                <input type="text" class="form-control" placeholder="col-md-4">
              </div>
              <div class="col-lg-2">
                <input type="text" class="form-control" placeholder="col-md-2">
              </div>
              <div class="col-lg-1 p-l-0">
                <input type="text" class="form-control" placeholder="col-md-1">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- editor -->
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Quill Editor</h4>
            <!-- Create the editor container -->
            <div id="editor" style="height: 300px;">
              <p>Hello World!</p>
              <p>
                Some initial
                <strong>bold</strong> text
              </p>
              <p>
                <br>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ============================================================== -->
    <!-- End PAge Content -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Right sidebar -->
    <!-- ============================================================== -->
    <!-- .right-sidebar -->
    <!-- ============================================================== -->
    <!-- End Right sidebar -->
    <!-- ============================================================== -->
  </div>
  <!-- ============================================================== -->
  <!-- End Container fluid  -->
  <!-- ============================================================== -->
  <!-- ============================================================== -->
  <!-- footer -->
  <!-- ============================================================== -->
  <footer class="footer text-center">
    All Rights Reserved by Matrix-admin. Designed and Developed by
    <a
      href="https://wrappixel.com"
    >WrapPixel</a>.
  </footer>
  <!-- ============================================================== -->
  <!-- End footer -->
  <!-- ============================================================== -->
</div>
</template>

<script>
export default {
  name: "FormBasic",
  props: {
    msg: String
  }
};
</script>
